import React, {PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import assign from 'object-assign';

import Track from '../ui/track/index';

import "./index.scss";
import WorksItem from './WorksItem';

import PageLoadByNum from '../ui/pageLoadByNum';

export default class WorksList extends Component {
    constructor(props){
        super(props);
        this.state = {
            totalCount : 0,
            data : [],
            page : 0,
            type : 'json',
            hasNext : true
        };
    }
    componentDidMount() {
        if(this.props.data){
            this.setState({
                data : this.props.data
            });
        }else{
            this.ajaxData();
        }
    }
    ajaxData(dataParams) {
        if(!dataParams){
            dataParams = {};
        }
        if (!this.props.url){
            return;
        }
        let nextPage = dataParams.page || (this.state.page+1);
        $.ajax({
            dataType : this.props.dataType,
            context : this,
            url : this.props.url,
            data : assign({
                page : nextPage,
                size : this.props.size,
                type : 'json'
            },this.props.ajaxParams),
            success : function (res) {
                let resData = res.dataArray || res.data;
                if(resData instanceof Array){
                    if(this.props.needPage){
                        this.setState({
                            page : nextPage,
                            totalCount : res.searchHitsTotal || 0,
                            data : resData
                        });
                    }else{
                        this.state.data.push.apply(this.state.data,resData);
                        this.setState({
                            page : nextPage,
                            data : this.state.data
                        });
                    }
                }
            }
        });
    }
    _loadPageData(){

    }
    render() {
        let me = this;
        let data = this.state.data;
        return (
           <div>
               <div className="project-index on">
                   {
                       data.map(function (item, index) {
                           let itemEl = (
                               <WorksItem {...{
                                   item: item,
                                   container: me.props.container
                               }}/>
                           );
                           return (
                               <div className="project success" key={item.id || index}>
                                   {
                                       me.props.trackType ? (
                                           <Track {...{
                                               type: me.props.trackType + '_' + item.id + '_' + item.title
                                           }}>
                                               {itemEl}
                                           </Track>
                                       ) : itemEl
                                   }
                               </div>
                           );
                       })
                   }
               </div>
               {
                   this.props.needPage ? (
                       <PageLoadByNum{...{
                           page: this.state.page,
                           totalCount: this.state.totalCount,
                           size : this.props.size,
                           clickPageNum(num){
                               me.ajaxData({
                                   page : num
                               });
                           }
                       }}/>
                   ) : false
               }
           </div>
        );
    }
}
WorksList.defaultProps = {
    dataType: 'json',
    size : 20
};
WorksList.propTypes = {
    url : PropTypes.string,
    size : PropTypes.number,
    dataType : PropTypes.string,
    ajaxParams : PropTypes.object,
    container : PropTypes.string,
    //自定义分页功能开关
    needPage : PropTypes.bool,
    //外界传来的初始化数据
    data: PropTypes.array,
    //记录日志用的
    trackType : PropTypes.string
};
